import React, {Children, useEffect} from 'react';
import { useHistory } from "react-router-dom";
import {useGoodsType} from '../../hook/goodstype';
import {useTabs} from '../../hook/mineTab';
import _ from 'lodash';
import {Button, Table, Breadcrumb, Select,Form,Space,Card} from 'antd';
import {AudioOutlined} from '@ant-design/icons';
import tabsApi from '../../api/tabs';
export default () => {
  const [minetabs, {getTabs}] = useTabs ();
  // console.log(minetabs);
  var obj=minetabs;
  var arr=Object.values(obj);
  // console.log(arr);
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />;

  const {Option} = Select;
  const handleChange = value => getTabs(value);
  const columns=[
    {
      title: 'Id',
      dataIndex: '_id',
      key:'_id',
      align:'center'
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key:'Name',
      align:'center'
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
      align:'center',
      render: (text,record,index) => <><Button type="primary"shape="round" style={{ marginRight: "5px" }} onClick={()=>changeTabs(record._id,record.name)}  value={record.name}>修改</Button>
                                       <Button type="primary" shape="round" danger style={{ marginRight: "5px" }} onClick={()=>changeDelete(record._id)} >删除</Button></>,
    },
  ];
  let history = useHistory();
  // 改
  const changeTabs=(id,name)=>{
      history.push(`/info/changestabs/${id}/${name}`);
  };
  // 删
  const changeDelete=async (removeId)=>{
    // console.log(rows[0]._id);
    // console.log("123142343");
   let data =await  tabsApi.remove({_id:removeId});
   console.log(data);
   await getTabs(rows[0]._id)
  };
  const [{rows}, {getNavs}] = useGoodsType ();
  // console.log (rows);
  useEffect (
    () => {
      getNavs ();
    },
    [getNavs]
  );
  const onFinish = async values => {
    console.log(values);
  };
  return (
    <div className="site-card-border-less-wrapper">
       <Space direction="vertical" style={{ width: "100%" }}>
       <Card>
      <Breadcrumb style={{margin: '16px 0'}}>
        <Breadcrumb.Item>主页</Breadcrumb.Item>
        <Breadcrumb.Item>商品分类</Breadcrumb.Item>
        <Breadcrumb.Item>商品类型列表</Breadcrumb.Item>
      </Breadcrumb>
      <Select defaultValue="乳品面包" style={{width: 120}} onChange={handleChange}>
        {rows.map ((item, index) => ( // console.log(item.name)
          <Option value={item._id} key={index}>{item.name}</Option>
        ))}
      </Select>
      </Card>
      <Card style={{ height: "640px" }}>
      
      <Table columns={columns }  dataSource={arr} size="middle" rowKey={record=>record._id}  />
      </Card>
       </Space>
    </div>
  );
};
